<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="../../css/root.css">
  <link rel="stylesheet" href="../../css/grid.css">
  <script src="../../../libs/d3/d3.v6.js"></script>
</head>

<body>
  <header>
    <h1>面积图</h1>
  </header>
  <main class="container">
    <h2>基本面积图</h2>
    <section>
      <div id="areaChart" style="height:50vh"></div>
    </section>
    <h2>可缩放面积图</h2>
    <section>
      <div id="zoomableAreaChart" style="height:50vh"></div>
    </section>
    <h2>堆叠面积图</h2>
    <section>
      <div id="stackedAreaChart" style="height:50vh"></div>
    </section>
  </main>

  <script type="module">
    import { AreaChart, ZoomableAreaChart, StackedAreaChart } from '../../dist/ccd3.js'

    d3.csv('./data/AreaChart.csv').then(data => {
      const areaChart = new AreaChart('areaChart', data)
        .setMargin(25, 35, 50, 50)
        .setXAxisKey('date')
        .setYAxisKey('close')
        .setYAxisTitle('Close')
        .init()
        .render();

      setInterval(() => {
        data.pop(100, 100);
        areaChart.render()
      }, 200)
    })

    d3.csv('./data/ZoomableAreaChart.csv').then(data => {
      const zoomableAreaChart = new ZoomableAreaChart('zoomableAreaChart', data)
        .setMargin(25, 35, 50, 50)
        .setXAxisKey('date')
        .setYAxisKey('value')
        .setYAxisTitle('Flights')
        .init()
        .render();
    })

    d3.csv('./data/StackedAreaChart.csv').then(data => {
      const stackedAreaChart = new StackedAreaChart('stackedAreaChart', data)
        .setMargin(25, 35, 50, 50)
        .setXAxisKey('date')
        .setYAxisTitle('Unemployment')
        .init()
        .render();
    })
  </script>
</body>

</html>